<template>
  <div id="mapChart" ref="mapChart" style="height:483px;margin-bottom:16px;"></div>
</template>

<script>
import echarts from 'echarts'
import taiyuan from '@/assets/json/taiyuan.json'
export default {
  name: 'MapChart',
  data () {
    return {
      mychart: {},
      geoCoordMap: {},
      mapData: [],
      option: {},
      scatterOption: {}
    }
  },
  mounted () {
    this.initMap()
    window.addEventListener('resize', () => {
      setTimeout(() => {
        this.mychart.resize()
      }, 500)
    })
  },
  methods: {
    initMap () {
      var name = '太原市'
      echarts.registerMap(name, taiyuan)
      this.mychart = echarts.init(this.$refs.mapChart)
      const data = []
      taiyuan.features.forEach(ele => {
        const name = ele.properties.name
        data.push({
          name,
          value: this.randomNum(3000, 10000)
        })
      })
      const mapMax = Math.max(...data.map(item => item.value))
      const mapMin = Math.min(...data.map(item => item.value))
      const option = {
        backgroundColor: 'rgba(12,16,61,0.7)',
        tooltip: {
          show: true,
          formatter (params) {
            return params.name + '：' + params.data['value']
          }
        },
        visualMap: {
          bottom: 16,
          right: 16,
          color: ['#ff4601', '#fffc00', '#87cffa'],
          min: mapMin,
          max: mapMax,
          calculable: true,
          textStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        geo: {
          map: '太原',
          layoutCenter: ['55%', '50%'],
          layoutSize: 650,
          top: 0,
          label: {
            normal: {
              show: true,
              color: '#fff'
            },
            emphasis: {
              color: '#fff'
            }
          },
          itemStyle: {
            normal: {
              areaColor: '#17439a',
              borderColor: '#fff'
            },
            emphasis: {
              areaColor: '#17439a',
              borderColor: '#fff'
            }
          }
        },
        series: [
          {
            type: 'map',
            mapType: name,
            zoom: 1.2,
            label: {
              normal: {
                show: true,
                color: '#fff'
              },
              emphasis: {
                textStyle: {
                  color: '#fff'
                }
              }
            },
            itemStyle: {
              normal: {
                borderColor: 'rgb(24,154,183)',
                borderWidth: 2,
                areaColor: 'rgb(21,51,117)'
              },
              emphasis: {
                areaColor: '#389BB7',
                borderWidth: 0
              }
            },
            animation: false,
            data
          }
        ]
      }
      this.mychart.setOption(option)
    },
    randomNum (minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10)
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
        default:
          return 0
      }
    }
  }
}
</script>

<style lang="less" scoped>
#mapChart {
  background: url('~@/assets/images/earth.png');
  background-size: cover;
}
</style>
